/**
* 音频组件
*
* H5端
* H5端播控, 使用定位、透明化Audio控件的方式. 即 直接操作Audio控件的播控按钮, 监听不同状态的事件来进行相应的处理.
*
* 小程序端
* 小程序端播控, 使用原生小程序Audio组件, 通过 action 属性控制组件的播控状态.
*	action 属性说明：
		类型: object
		值:
			{method: "pause"}: 暂停
			{method: "play"}: 播放
			{method: "setCurrentTime", data: 0}: 当前播放时间
			{method: "setPlaybackRate", data: 0}: 当前播放速率
**/
import React, { Component } from 'react';
import {Block, Audio} from '@tarojs/components';
import {TARO_ENV} from "../../../../constants/api";
import "./index.scss";

export default class AudioPlay extends Component {
	constructor(props) {
		super(props);
		this.state = {};
	}

	componentDidMount() {}
	componentWillUnmount() {}

	onPlay = e => {
		this.props.handlePlay(e);
	};
	onPause = e => {
		this.props.handlePause(e);
	};
	onEnded = e => {
		this.props.handleEnded(e);
	};
	onTimeUpdate = e => {
		this.props.handleTimeUpdate(e);
	};

	render() {
		return (
			<Block>
			{
				TARO_ENV === "h5" ?
				<Audio
					src={this.props.audioUrl}
					autoplay={this.props.autoplay}
					loop={false}
					initialTime='30'
					id={`audioPlay_${this.props.itemId}`}
					className="sali-audio"
					onPlay={this.onPlay}
					onPause={this.onPause}
					onEnded={this.onEnded}
					onTimeUpdate={this.onTimeUpdate}
				/>
				:
				<Audio
					action={this.props.audioAction}
					src={this.props.audioUrl}
					autoplay={false}
					loop={false}
					initialTime='30'
					id={`audioPlay_${this.props.itemId}`}
					className="sali-audio"
					onPlay={this.onPlay}
					onPause={this.onPause}
					onEnded={this.onEnded}
					onTimeUpdate={this.onTimeUpdate}
				/>
			}
			</Block>
		)
	}
}
